<template>
	<view class="evaluate">
		<u-navbar :titleStyle="{fontWeight:'bold'}" title="商品评价" />
		<view class="evaluate-box">
			<view class="evaluate-card">
				<view class="evaluate-totie">正在评价商品</view>
				<order-item :item="details" mode="1" />
				<view class="refund-Upload">
					<view class="Upload-totie">评价描述</view>
					<view class="Upload-text">
						<u-textarea height="130" :showConfirmBar="false" maxlength="-1" border="none" v-model="content"
							placeholder="分享您本次购物的感想吧..."></u-textarea>
						<view>
							<view class="Upload-img">
								<view class="Upload-img-item" v-for="(item,index) in fileList5" :key="index">
									<u-image
									radius="5"
										:src="item.url"
										width="100%" height="180rpx"></u-image>
										<view class="Upload-img-delete" @click="deletePic(index)">
											<u-icon color="#FFCF4F" size="25" name="close-circle-fill"></u-icon>
										</view>
								</view>
							</view>
							<u-upload :previewImage="false" maxCount="6" :fileList="fileList5" @afterRead="afterRead" name="6" multiple width="180rpx" height="180rpx">
								<view class="Upload-box">
									<view class="Upload-icon">
										<u-icon name="camera" color="#999" size="28"></u-icon>
									</view>
									<view class="Upload-texts">上传图片</view>
								</view>
							</u-upload>
						</view>
					</view>
				</view>
			</view>
		</view>
		<statusbar>
			<view class="refund-botem">
				<button class="refund-button cu-btn" @click="submitChang">提交评价</button>
			</view>
		</statusbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				fileList5: [],
				details: {
					goods_list: []
				},
			};
		},
		onLoad(e) {
			this.details.goods_list.push(JSON.parse(e.data))
			console.log(this.details)
		},
		methods: {
			deletePic(e) {
				this.fileList5.splice(e,1)
			},
			afterRead(e) {
				const {
					url
				} = e.file[0]
				this.uploadFilePromise(url).then(res => {
					this.fileList5.push({
						url: res
					})
				})
			},
			submitChang() {
				if(!this.content){
					this.$u.toast('请输入评价内容')
					return
				}
				let data = this.details.goods_list[0]
				this.$network('/api/order/comment',{
					cond_id:data.id,
					content:this.content,
					img:this.fileList5.map(item=> item.url)
				}).then(res=>{
					if(res.code == 1){
						this.$u.vuex('evaluate_switch',true)
						this.$u.toast('感谢您的评价')
						setTimeout(() => {
							uni.navigateBack()
						}, 700)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.Upload-img {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		.Upload-img-item {
			width: 31%;
			position: relative;
			margin-bottom: 15rpx;
			.Upload-img-delete{
				position: absolute;
				top: 3px;
				right: 3px;
			}
		}

		.Upload-img-item:last-child:nth-child(3n + 2) {
			margin-right: calc((100% - 31%) / 2 * 1);
		}
	}

	::v-deep .u-upload__wrap__preview {
		margin: 0 5px 8px 0 !important;
	}

	.refund-botem {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.refund-button {
			width: 100%;
			height: 90rpx;
			background-color: #FFCF4F;
			padding: 0;
			margin: 0;
			color: #333;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8px;
		}
	}

	::v-deep .u-textarea {
		padding: 0 !important;
	}

	.Upload-box {
		width: 150rpx;
		height: 130rpx;
		border: 1px dashed #999;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.Upload-texts {
			font-size: 28rpx;
			color: #999;
		}
	}

	.refund-Upload {
		margin-top: 25rpx;

		.Upload-totie {
			font-size: 28rpx;
			font-weight: bold;
			color: #000;
			margin-bottom: 25rpx;
		}

		.Upload-text {
			width: 100%;
			min-height: 200rpx;
			background: rgb(247, 247, 247);
			border-radius: 5px;
			padding: 20rpx;
		}
	}

	.evaluate-box {
		padding: 20rpx;

		.evaluate-card {
			width: 100%;
			background: #FFF;
			border-radius: 8px;
			padding: 20rpx;

			.evaluate-totie {
				font-size: 28rpx;
				color: #000;
				font-weight: bold;
				margin-bottom: 25rpx;
			}
		}
	}
</style>
